<template>
	<div>
		<headerNav></headerNav>
		<serviceIcon></serviceIcon>
		<div class="aboutbanner">
			<div class="abouttitle cbody">
				<h4>
					关于我们
					<p>ABOUT US</p>
				</h4>
			</div>
		</div>
		<div class="aboutdm cbody">
			<h4>关于远村</h4>
			<p>旗下商城【远村】搭建城乡连接平台，为用户提供乡村旅游+乡土特产特色服务，连接城市与乡村。深度挖掘产品卖点，将互联网与农产品相结合，<br> 拉近农户与市场的距离，实现农产业的良性循环和可持续发展，兼顾经济效益和社会效益</p>
		</div>
		<div class="dmteam cbody">
			<h4>远村团队</h4>
			<p class="intro">远村的主要团队包括产品经理、前端工程师、PHP工程师、iOS工程师、测试工程师、UI设计师等各方面的专业人才，以保证平台的日常运行与流转</p>
			<div class="dmteamList clearfix">
				<div class="dmteamitem">
					<img src="../../../static/images/team_photo1.png" />
					<h5>创始人 : <span>庄志哲  </span></h5>
					<p>出任企业CEO一职，负责企业战略规划、企业管理、决策。 </p>
				</div>
				<div class="dmteamitem">
					<img src="../../../static/images/team_photo2.png" />
					<h5>技术经理 : <span>刘艺霞  </span></h5>
					<p>负责技术团队组建、管理，项目开发与迭代规划等 </p>
				</div>
				<div class="dmteamitem">
					<img src="../../../static/images/team_photo3.png" />
					<h5>产品经理 : <span>邱春龙 </span></h5>
					<p>负责产品团队的组建,管理及公司产品的架构迭代</p>
				</div>
			</div>
		</div>
		<div class="zyqf cbody">
			<h4>卓越青凡</h4>
			<p>厦门市卓越青凡网络科技有限公司成立于2016年，是一家以信息技术服务为主导、立足于高科技领域的前沿，专业致力于互联网平台开发和运营服务<br/> 的创新型信息科技公司</p>
		</div>
		<footerbox></footerbox>
	</div>
</template>

<script>
	import headerNav from './template/header'
	import serviceIcon from './template/service'
	import footerbox from './template/footer'
	export default{
		data(){
			return{
				
			}
		},
		components:{
			headerNav,
			serviceIcon,
			footerbox
		},
		methods:{
			
		},
		beforeRouteLeave(to, from, next) {
			this.$destroy();
			next();
		},
		mounted(){
			
		}
	}
</script>

<style lang="scss">
	@import '../../styles/styles.scss';
h4,p{
	margin: 0;
}
.cbody{
	width: 1280px;
	margin: 0 auto;
}
.aboutbanner{
	position: relative;
	background: #fff;
	margin-bottom: 90px;
}
.abouttitle{
	height: 350px;
	background: url(../../../static/images/aboutbanner.jpg) no-repeat;
	background-size: 100% auto;
	/*background-attachment: fixed;*/
	
}
.abouttitle h4{
	font-size:36px;
	font-family:MicrosoftYaHei;
	color: #fff;
	text-align: center;
	font-weight: normal;
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);	/* IE 9 */
	-webkit-transform: translate(-50%,-50%);	/* Safari and Chrome */
	-o-transform: translate(-50%,-50%);		/* Opera */
	-moz-transform: translate(-50%,-50%);		/* Firefox */
}
.aboutdm{
	background: #F7F7F7;
	height: 320px;
	overflow: hidden;
	h4{
		margin-top: 80px;
		font-size:24px;
		font-family:MicrosoftYaHei;
		color:rgba(34,34,34,1);
		text-align: center;
		font-weight:normal; 
		&:after{
			content: "";
			display: block;
			margin: 10px auto 0;
			width: 35px;
			height: 4px;
			background: #2B89FC;
		}
	}
	p{
		margin-top: 80px;
		font-size:14px;
		font-family:MicrosoftYaHei;
		color:rgba(89,87,88,1);
		text-align: center;
		line-height: 30px;
	}
}
.dmteam{
	text-align: center;
	overflow: hidden;
	padding-bottom: 106px;
	h4{
		margin-top: 80px;
		font-size:24px;
		font-family:MicrosoftYaHei;
		color:rgba(34,34,34,1);
		text-align: center;
		font-weight:normal; 
		&:after{
			content: "";
			display: block;
			margin: 10px auto 0;
			width: 35px;
			height: 4px;
			background: #2B89FC;
		}
	}
	.intro{
		margin-top: 80px;
		font-size:14px;
		font-family:MicrosoftYaHei;
		color:rgba(89,87,88,1);
		text-align: center;
		line-height: 30px;
	}
	.dmteamList{
		display: inline-block;
		margin: 62px auto 0;
		text-align: center;
		.dmteamitem{
			float: left;
			overflow: hidden;
			margin-right: 20px;
			width: 290px;
			height: 400px;
			transition: width .3s;
			-moz-transition: all .3s;	/* Firefox 4 */
			-webkit-transition: all .3s;	/* Safari 和 Chrome */
			-o-transition: all .3s;	/* Opera */
			&:hover{
				box-shadow:0px 0px 10px rgba(34,34,34,0.1);
			}
			&:nth-child(3n){
				margin-right: 0;
			}
			img{
				display: block;
				margin: 65px auto 0;
			}
			h5{
				font-size:18px;
				font-family:MicrosoftYaHei;
				color:rgba(34,34,34,1);
				text-align: center;
				font-weight: normal;
				margin: 40px auto 15px;
				span{
					color: #2b89fc;
				}
			}
			p{
				width: 60%;
				margin: 0 auto;
				line-height: 25px;
				text-align: center;
				font-size:12px;
				font-family:MicrosoftYaHei;
				color:rgba(34,34,34,1);
			}
		}
	}
}
.zyqf{
	background: #F7F7F7;
	height: 320px;
	overflow: hidden;
	margin-bottom: 100px;
	h4{
		margin-top: 80px;
		font-size:24px;
		font-family:MicrosoftYaHei;
		color:rgba(34,34,34,1);
		text-align: center;
		font-weight:normal; 
		&:after{
			content: "";
			display: block;
			margin: 10px auto 0;
			width: 35px;
			height: 4px;
			background: #2B89FC;
		}
	}
	p{
		margin-top: 80px;
		font-size:14px;
		font-family:MicrosoftYaHei;
		color:rgba(89,87,88,1);
		text-align: center;
		line-height: 30px;
	}
}
</style>